<template>
  <div class="page-login flex items-center justify-center">
    <div class="login-box p-6 sm:p-12 bg-white rounded" >
      <div class="flex flex-col items-center">
        <h1 class="text-2xl xl:text-3xl font-extrabold">
          用户登录
        </h1>
        <div class="w-full flex-1 mt-6">
          <div class="mx-auto max-w-xs">
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
              <el-form-item prop="username">
                <el-input v-model="loginForm.username" placeholder="用户名">
                  <template #prefix>
                    <i-ep:user />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" show-password placeholder="密码" @keyup.enter="handleLogin(loginFormRef)">
                  <template #prefix>
                    <i-ep:lock />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <el-button
              class="w-320px mt-6 rounded" size="large" type="primary" :loading="loading"
              @click="handleLogin(loginFormRef)"
            >
              登录
            </el-button>
            <div class='mt-2 text-sm flex flex-justify-end'>
              <el-link @click="toRegister" type="primary">去注册</el-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import type { Admin } from '~/composables/types'

import AdminApi from '../../api/admin'
const router = useRouter()

const loginFormRef = ref<FormInstance>()
const loginRules = reactive<FormRules>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  // imgCode: [{ required: true, message: '请输入图像验证码', trigger: 'blur' }],
})

// 登录表单数据
const loginForm = ref<Admin>({
  username: '',
  password: '',
  rememberMe: true,
})

const loading = ref(false)
const handleLogin = (formEl: FormInstance | undefined) => {
  // ElMessage.success('登录成功')
  AdminApi.login(loginForm.value).then(res => {
    console.log("===> ",res)
    if(res.data.code == 0) {
      ElMessage.success('登录成功')
      router.push('/home')
    }
  })
}

const toRegister = () => {
  router.push('/register')
}
</script>


<style lang="scss" scoped>
.page-login {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-color: #00000044;
  .login-box {
    filter: drop-shadow(2px 4px 4px gray);
  }
}

</style>
